<template>
  <div class="filters">
    <span
      class="filter"
      v-for="(item, index) in filters"
      :key="index"
      :class="{ active: selected === item.value }"
      @click="$emit('change-filter', item.value)"
      >{{ item.label }}</span
    >
  </div>
</template>

<script>
export default {
  props: ["selected"],
  data() {
    return {
      filters: [
        { label: "全部", value: "all" },
        { label: "已完成", value: "completed" },
        { label: "未完成", value: "todo" }
      ]
    };
  }
};
</script>

<style lang="scss">
.filters {
  display: flex;
  margin: 24px 2px;
  color: #c0c2ce;
  font-size: 14px;

  .filter {
    margin-right: 14px;
    transition: transform 0.5s;
    cursor: pointer;
  }
  .active {
    color: #6b729c;
    transform: scale(1.2);
  }
}
</style>
